<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="'菜单列表'">
            <nz-table #expandTable [nzData]="menuList" [nzFrontPagination]="false" [nzHideOnSinglePage]="true" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th nzWidth="25%">菜单名称</th>
                        <th nzWidth="25%">菜单路径</th>
                        <th nzWidth="25%">权限路径</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let data of expandTable.data">
                        <tr>
                            <td [nzIndentSize]="0" [nzShowExpand]="!!data.children" [(nzExpand)]="data.expand" (nzExpandChange)="changeExpand($event,data)">
                                <span style="font-weight:bold;color:#000;"> {{ data.name }}</span>
                            </td>
                            <td>{{ data.frontPath }}</td>
                            <td>{{ data.path }}</td>
                            <td><a style="margin-right:10px;" (click)="updateMenu(data)">编辑</a><a style="margin-right:10px;" (click)="addChildMenu(data)">新增子菜单</a><a (click)="deleteMenu(data)">删除</a></td>
                        </tr>
                        <ng-container *ngFor="let item of data.children">
                            <tr *ngIf="data.expand">
                                <td [nzIndentSize]="40" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand">
                                    <span style="color:#666;"> {{ item.name }}</span>
                                </td>
                                <td>{{ item.frontPath }}</td>
                                <td>{{ item.path }}</td>
                                <td><a style="margin-right:10px;" (click)="updateMenu(item)">编辑</a><a style="margin-right:10px;" (click)="addChildBtn(item)">新增按钮权限</a><a (click)="deleteMenu(item)">删除</a></td>
                            </tr>
                            <ng-container *ngFor="let btn of item.children">
                                <tr *ngIf="item.expand">
                                    <td [nzIndentSize]="70">
                                        {{ btn.name }}
                                    </td>
                                    <td>{{ btn.frontPath }}</td>
                                    <td>{{ btn.path }}</td>
                                    <td><a style="margin-right:10px;" (click)="updateMenu(btn)">编辑</a><a (click)="deleteMenu(btn)">删除</a></td>
                                </tr>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                </tbody>
            </nz-table>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addMenu()">新增菜单</button>
    </ng-template>
    <nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">菜单名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.name">
                    <input nz-input id="name" formControlName="name" placeholder="请输入菜单名称" />
                    <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">菜单名称不能为空！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="frontPath" nzRequired>路由地址</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('frontPath')">
                    <input nz-input id="frontPath" formControlName="frontPath" placeholder="请输入路由地址" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="path" nzRequired>权限地址</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('path')">
                    <input nz-input id="path" formControlName="path" placeholder="请输入权限地址" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="image" nzRequired>菜单图标</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('image')">
                    <input nz-input id="image" formControlName="image" placeholder="请输入图标名称" />
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>
